package examples
{
	import com.dreamana.command.*;
	import com.dreamana.components.*;
	import com.dreamana.ui.*;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.geom.Rectangle;
	
	public class SpritesheetExample extends Sprite
	{
		public function SpritesheetExample()
		{
			stage? init() : this.addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(event:Event=null):void
		{
			if(event) this.removeEventListener(event.type, init);
			
			this.x = 320;
			this.y = 240;
			
			/* Skinning example */
			
			//Skinnable Components
			var canvas:Canvas = new Canvas(300, 160);
			canvas.setPosition(10, 10);
			this.addChild(canvas);
			
			var panel:Panel = new Panel(280, 100);
			panel.setPosition(10, 10);
			canvas.addChild(panel);
			
			var button:Button = new Button(128, 20, new Label(128, 20, null, "OK", 0, 0));
			button.setPosition(10, 120);
			canvas.addChild(button);
			
			var comboBox:ComboBox = new ComboBox(100, 20);
			comboBox.setPosition(190, 120);
			comboBox.setItems([
				{label:"Apple Pie", data:0},
				{label:"Big Mac", data:1},
				{label:"Coffee", data:2},
				{label:"Dip Cone", data:3},
				{label:"Egg Roll", data:4},
				{label:"French Fries", data:5},
				{label:"Green Salad", data:6},
				{label:"Hot Chocolate", data:7},
				{label:"Iced Tea", data:8},
				{label:"Junior Burger", data:9}
			]);
			canvas.addChild(comboBox);
			
			//Non-Skinnable Components
			var label:Label = new Label(280, 100, null, "", 0, 0);
			label.multiline = true;
			label.htmlText = "<b>Using Spritesheet</b><br><br>Spritesheet is widely used in game develop.<br>I got the idea from CSS-Sprite techniques.<br><br>Click 'OK' to try dynamic skinning";
			panel.addChild(label);
			
			//Skinning from Spritesheet.
			var skinning:SkinningCommand = new SkinningCommand("../assets/ui.xml");
			
			canvas.setStyleAsync("background-image", skinning.getClip("bg"));
			canvas.setStyle("background-repeat", true);
			panel.setStyleAsync("background-image", skinning.getClip("face"));
			panel.setStyle("background-9grid", new Rectangle(4, 4, 14, 14));
			button.setStyleAsync("background-image", skinning.getClip("button"));
			button.setStyle("background-9grid", new Rectangle(10, 0, 20, 20));
			
			comboBox.input.setStyleAsync("background-image", skinning.getClip("input"));
			comboBox.input.setStyle("background-9grid", new Rectangle(4, 4, 32, 12));
			comboBox.button.setStyleAsync("background-image", skinning.getClip("face"));
			comboBox.button.setStyle("background-9grid", new Rectangle(4, 4, 14, 14));
			comboBox.dropDownList.vscrollbar.setStyleAsync("dragger-image", skinning.getClip("face"));
			comboBox.dropDownList.vscrollbar.setStyle("dragger-9grid", new Rectangle(4, 4, 14, 14));
			comboBox.dropDownList.vscrollbar.setStyleAsync("track-image", skinning.getClip("shadow"));
			comboBox.dropDownList.vscrollbar.setStyle("track-9grid", new Rectangle(4, 4, 14, 14));
			comboBox.dropDownList.setStyle("border-color", -1);
			comboBox.dropDownList.cellContainer.filters = [new DropShadowFilter(2, 45, 0x808080)];
			comboBox.dropDownList.setCellRenderer(CustomCell);
			comboBox.setStyle("list-height", 80);
			
			//Click to start
			button.addEventListener(MouseEvent.CLICK, function(e:Event):void 
			{
				skinning.execute();
			});
		}
	}
}


import com.dreamana.components.ListCell;

class CustomCell extends ListCell
{
	public function CustomCell()
	{
		super();
		setStyle("color", 0xffffff);
		setStyle("hoverColor", 0xe1eeff);
		setStyle("activeColor", 0xb5d5ff);
		setStyle("selectedColor", 0x2c4384);
	}
}